<template>
	<view class="swiper-dots" :style="style" v-if="dots.length > 0">
		<template v-for="(dot, index) in dots" :key="index">
			<view
				v-if="index == current"
				class="dot-item active"
				:style="{ width: activeWidth + 'rpx' }"
			></view>
			<view v-else :key="index" class="dot-item"></view>
		</template>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
const props = defineProps({
	count: {
		type: Number,
		default: 0,
	},
	current: {
		type: Number,
		default: 0,
	},
	style: {
		type: String,
		default: "",
	},
	activeWidth: {
		type: Number,
		default: 28,
	},
})

const dots = ref<boolean[]>([])

watch(
	() => props.count,
	(val) => {
		dots.value = new Array(val || 0).fill(true)
	},
	{ immediate: true },
)

onMounted(() => {})
</script>

<style scoped lang="scss">
.swiper-dots {
	// position: absolute;
	display: flex;
	.dot-item {
		width: 8rpx;
		height: 8rpx;
		margin-left: 6rpx;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 0.5);
		&.active {
			background: rgba(255, 235, 59, 0.8);
		}
	}
}
</style>
